<template>
	<view class="content">
		<view class="user-info">
			<image class="avatar" :src="userinfo.img" mode="aspectFill"></image>
			<view class="user-details">
				<view class="name">{{ userinfo.username }}</view>
				<view class="driver-id">司机ID: {{ userinfo.id }}</view>
				<view class="phone">手机号: {{ userinfo.phone }}</view>
			</view>
		</view>
		<view class="buttons-container">
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Cheliangxinxi')">
				<icon class="iconfont icon-cheliangxinxi" style="font-size:24px;"></icon>
				<view class="button-text">车辆信息</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<!-- <navigator url="/pages/index/Grzxml/Cheliangxinxi" hover-class="navigator-hover">
				<button class="button" type="default" hover-class="none">
					<icon class="iconfont icon-cheliangxinxi" style="font-size:24px;"></icon>
					<view class="button-text">车辆信息</view>
					<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
				</button>
			</navigator> -->
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Renwushuju')">
				<icon class="iconfont icon-renwushuju" style="font-size:24px;"></icon>
				<view class="button-text">任务数据</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
			<button class="button" type="default" hover-class="none" @click="tz('/pages/index/Grzxml/Xitongshezhi')">
				<icon class="iconfont icon-xitongshezhi" style="font-size:24px;"></icon>
				<view class="button-text">系统设置</view>
				<icon class="iconfont icon-xiangyou1" style="font-size:24px;"></icon>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{
					id:'',
					username:'',
					phone:'',
					img:'https://pic.kts.g.mi.com/eba5c547627cb471cbd02af459c4ac2e7092888291247704500.png',
				}
			}
		},
		methods: {
			tz(lj){
				wx.navigateTo({
					url:lj
				})
			}
		},
		onShow() {
			const userinfo = uni.getStorageSync('userinfo');
			this.userinfo=userinfo
		}
	}
</script>

<style>.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx; /* 增加间距 */
}

.avatar {
  width: 160rpx; /* 增大头像尺寸 */
  height: 160rpx;
  border-radius: 50%;
  margin-right: 125rpx; /* 增加间距 */
}

.user-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 36rpx; /* 调整字号 */
  font-weight: bold;
  margin-bottom: 10rpx; /* 增加间距 */
}

.driver-id,
.phone {
  font-size: 30rpx; /* 调整字号 */
  color: #666;
  margin-bottom: 10rpx; /* 增加间距 */
}

.buttons-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx; /* 增加间距 */
  border-radius: 8rpx;
  width: 100%; /* 占据整个宽度 */
  height: 80rpx; /* 设置按钮高度 */
  line-height: 80rpx; /* 确保文本垂直居中 */
  padding: 0 20rpx; /* 添加左右内边距 */
}

.button-text {
  flex: 1;
  text-align: center; /* 文字居中 */
}

.icon-arrow-right {
  margin-left: 10rpx; /* 增加图标与文字之间的间距 */
}
</style>
